<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<view class="status"></view>
		<view class="title"><text>{{content}}</text></view>
		<view class="top" :style="scrollstyle">
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="top">
				<!-- #endif -->
				<swiper interval="3000" duration="200" :circular="staus">
					<swiper-item>
						<view class="swiper-item">
						   <text class="kcmc">{{now.title}}</text>
						   <text class="address">{{now.day}}</text>
						   <text class="kcsj">{{now.time}}</text> 
						</view>
					</swiper-item>
					<swiper-item v-for="(item, index) of banner" :key="index">
						<view class="swiper-item">
						   <text class="kcmc">{{item.kcmc}}</text>
						   <text class="address">{{item.jsmc}}</text>
						   <text class="kcsj">{{format_time(item.kcsj)}}  ·  {{item.jsxm}}</text>
						   
						</view>
					</swiper-item>
				</swiper>

				<view class="icons">
					<view v-for="(item, index) in icons" :key="index" @tap="urlPath(index)">
						<image :src="item.path" mode=""></image>
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>
			<view class="courses">
				<view class="topic" @tap="go_cj">
					<text class="new">成绩学分</text>
					<view>
						<text>查看更多</text>
						<image src="../../static/images/right.png" mode=""></image>
					</view>
				</view>
				<view class="ddd">
					{{cj}}
				</view>
			</view>
			<view class="courses">
				<view class="topic" @tap="go_ks">
					<text class="new">考试安排</text>
					<view>
						<text>查看更多</text>
						<image src="../../static/images/right.png" mode=""></image>
					</view>
				</view>
				<view class="ddd">
					{{ks}}
				</view>
			</view>
			<view class="courses">
				<view class="topic" @tap="go_jw">
					<text class="new">教务通知</text>
					<view>
						<text>查看更多</text>
						<image src="../../static/images/right.png" mode=""></image>
					</view>
				</view>
				<view class="news" v-for="(item,index) of news" :key="index" @tap="go_news(index)">
					<text class="ntitle">{{item.title}}</text>
					<text class="time">{{item.time}}</text>
				</view>
			</view>
		</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js"
	const device = uni.getSystemInfoSync();
	const top = device.statusBarHeight + uni.upx2px(68);
	let days = ['SUNDAY','MONDAY','TUESDAY','WEDNESDAY','THURSDAY','FRIDAY','SATURDAY'];
	export default {
		computed: {
			scrollstyle() {
				return "margin-top:" + top + "px;";
			}
		},
		data() {
			return {
				staus:false,
				ks: '最近有 0 门考试',
				cj: '共 0 门课程,总学分 0.0',
				now:{
					
				},
				news: {

				},
				banner: [],
				icons: [{
						path: '../../static/images/kuaidi.png',
						url: '../express/express',
						title: '快递代取'
					},
					{
						path: '../../static/images/jianzhi.png',
						url: '../work/work',
						title: '兼职寻求'
					},
					{
						path: '../../static/images/shangcheng.png',
						url: '../market/market',
						title: '校园二手'
					},
					{
						path: '../../static/images/wenda.png',
						url: '../question/question',
						title: '问答平台'
					},
					{
						path: '../../static/images/huodong.png',
						url: '../activity/activity',
						title: '活动发布'
					}
				],
				content: '微校园',
			}
		},
		onLoad() {
			let that = this;
			//获取本地存储的token 获取不到 则跳转到登录界面
			var token = uni.getStorageSync("token") || [];
			if (token.length == 0) {
				uni.redirectTo({
					url: '../login/login'
				});
			} else {
				utils.post("user/tokenlogin", {}, function(data) {
					that.setInfo({
						user: data.user,
						touch: data.touch,
						star: data.star
					});
				});
			}
			// utils.loading("加载中...");
			this.getNews(0, 0);
			utils.get("news/getkebiao",{},function(data){
				that.banner = data;
				let date = new Date();
				that.now.title = "今天共"+that.banner.length+"门课程";
				that.now.day = days[date.getDay()];
				that.now.time = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
			},function(){
				
			});
			utils.get("news/getindex", {}, function(data) {
				that.ks = data.ks;
				that.cj = data.cj;
			});
			uni.showTabBarRedDot({
				index:1
			});
			uni.showTabBarRedDot({
				index:2
			});
		},
		onPageScroll(e) {
			let top = e.scrollTop;
			if (top > uni.upx2px(1064)) {
				this.setTitle("教务通知");
			} else if (top > uni.upx2px(824)) {
				this.setTitle("考试安排");
			} else if (top > uni.upx2px(584)) {
				this.setTitle("成绩学分");
			} else {
				this.setTitle("微校园");
			}
		},
		methods: {
			format_time(time){
				return time.substr(2,1)+" - " + time.substr(4,1) + " 节";
			},
			setTitle(msg) {
				// #ifdef APP-PLUS
				this.content = msg;
				// #endif
				// #ifdef MP-WEIXIN
				uni.setNavigationBarTitle({
					title: msg
				})
				// #endif
			},
			go_jw() {
				uni.navigateTo({
					url: '../jww/jww'
				});
			},
			go_ks() {
				uni.navigateTo({
					url: '../jww/kaoshi'
				});
			},
			go_cj() {
				uni.navigateTo({
					url: '../jww/chengji'
				});
			},
			go_news(index) {
				let ne = this.news[index];
				uni.navigateTo({
					url: '../newsdetail/newsdetail?url=' + ne.url + "&time=" + ne.time
				});
			},
			...mapMutations(['setInfo']),
			getNews(pageId, type) {
				let that = this;
				utils.get("/news/list", {
					pageId: pageId
				}, function(data) {
					that.news = data;
				},function(){
					
				})
			},
			urlPath(index) {
				uni.navigateTo({
					url: this.icons[index].url
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f7fa;
		font-family: PingFangSC-Semibold;
	}

	.content {
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		width: 100%;
		margin: 0px auto;
	}

	.status {
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
		background-color: #ffffff;
	}

	.title {
		width: 93%;
		/* 	margin:  auto; */
		font-size: 38upx;
		font-weight: 800;
		height: 68upx;
		color: #313132;
		padding: 0 3.5%;
		letter-spacing: 0;
		position: fixed;
		line-height: 68upx;
		top: var(--status-bar-height);
		background-color: #ffffff;
		z-index: 999;
	}

	.top {
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: #ffffff;
		/* margin-top: 118upx; */
		align-items: center;
	}

	.top swiper {
		width: 93%;
		height: 300upx;
		margin-top: 20upx;
		box-shadow: 1px 1px 6px #999;
		border-radius: 20upx;
	}
	swiper-item{
		border-radius: 20upx;
	}
	.swiper-item {
		border-radius: 20upx;
		width: 100%;
		height: 300upx;
		display: flex;
		flex-direction: column;
	}
	.kcmc{
		height: 74upx;
		margin-left: 20upx;
		margin-right: 20upx;
		font-size: 36upx;
		font-weight: 700;
		margin-top: 20upx;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
		/* border-bottom: 1px solid #dcdcdc; */
		padding-left: 4upx;
	}
	.address{
		height: 120upx;
		margin-left: 20upx;
		font-size: 60upx;
		font-weight: 700;
		margin-top: 26upx;
		font-family: "Times New Roman", Times, serif;;
		color:#2E77ED;
		
	}
	.kcsj{
		height: 70upx;
		margin-top: 20upx;
		font-size: 30upx;
		margin-left: 25upx;
		font-weight: 600;
		
	}
	.swiper-item image {
		width: 100%;
		height: 304upx;
		border-radius: 20upx;
	}

	.icons {
		width: 100%;
		height: 140upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 50upx;
		justify-content: center;
		margin-bottom: 20upx;
	}

	.icons view {
		width: 20%;
		height: 140upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.icons view image {
		width: 60upx;
		height: 60upx;
	}

	.icons view text {
		font-size: 26upx;
		margin-top: 15upx;
	}

	.courses {
		width: 100%;
		margin-top: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #ffffff;
		align-items: center;
	}

	.topic {
		width: 93%;
		height: 90upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.topic .new {
		flex: 1;
		font-size: 38upx;
		font-weight: 700;
	}

	.topic view {
		display: flex;
		flex-direction: row;
	}

	.topic view text {
		font-size: 30upx;
		color: #909399;
		margin-right: 7upx;
	}

	.topic view image {
		width: 40upx;
		height: 40upx;
	}

	.ddd {
		width: 93%;
		height: 130upx;
		line-height: 90upx;
		font-size: 32upx;
		font-family:Arial;

	}

	.news {
		width: 93%;
		height: 180upx;
		box-shadow: inset 0px -1px 1px -1px #c8c7cc;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.ntitle {
		font-size: 30upx;
		margin-top: 18upx;
	}

	.time {
		font-size: 26upx;
		color: #666;
		margin-bottom: 18upx;
	}

	.tips {
		width: 100%;
		height: 90upx;
		font-size: 30upx;
		color: #666;
		line-height: 90upx;
		text-align: center;
	}
</style>
